<link rel="import" href="../../../../node_modules/@polymer/polymer/polymer-element.html">

<dom-module id="storybook-welcome-to-polymer">
  <template>
    <style>
      .main {
        margin: 15px;
        max-width: 600px;
        line-height: 1.4;
        font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
      }

      .logo {
        width: 200px;
      }

      .code {
        font-size: 15px;
        font-weight: 600;
        padding: 2px 5px;
        border: 1px solid #eae9e9;
        border-radius: 4px;
        background-color: #f3f2f2;
        color: #3a3a3a;
      }

      .note {
        opacity: 0.5;
      }
    </style>
    <div class="main">
      <h1>Welcome to Storybook for Polymer</h1>
      <p>This is a UI component dev environment for your polymer app.</p>
      <p>
        We've added some basic stories inside the <code class="code">src/stories</code> directory.
        <br />
        A story is a single state of one or more UI components. You can have as many stories as you want.
        <br />
        (Basically a story is like a visual test case.)
      </p>
      <p>
        See these sample <a class="link" href="#" on-click="goToButtonWrapper">stories</a> for a component called <code class="code">playground-button</code>
      </p>

      <p style="text-align:center"><img src="../logo.svg" class="logo" /></p>
      <p>
        Just like that, you can add your own components as stories.
        <br />
        You can also edit those components and see changes right away.
        <br />
        (Try editing the <code class="code">playground-button</code> stories
        located at <code class="code">src/playground-button.html</code>.)
      </p>
      <p>
        Usually we create stories with smaller UI components in the app.<br />
        Have a look at the
        <a class="link" href="https://storybook.js.org/basics/writing-stories" target="_blank">
          Writing Stories
        </a>
        section in our documentation.
      </p>
      <p class="note">
        <b>NOTE:</b>
        <br />
        Have a look at the
        <code class="code">.storybook/webpack.config.js</code>
        to add webpack loaders and plugins you are using in this project.
      </p>
    </div>
  </template>
  <script>
    class StorybookWelcomeToPolymer extends Polymer.Element {
      static get is() {
        return 'storybook-welcome-to-polymer';
      }

      static get properties() {
        return { goToButton: { type: Function, value: () => {} } };
      }

      goToButtonWrapper(e) {
        e.preventDefault();
        this.goToButton();
      }
    }
    customElements.define(StorybookWelcomeToPolymer.is, StorybookWelcomeToPolymer);
  </script>
</dom-module>
